<template>
    <view :data-theme="globPrimary" class="exam">
        <u-navbar title="确认订单"></u-navbar>
        <edu-mescroll-body
            @init="mescrollInit"
            height="calc(100vh - 44px - 98rpx)"
            @down="refresh"
            :up="upOption"
            @up="getOrderSection"
        >
            <view
                class="u-flex u-col-top section-wrapper"
                v-if="!$u.test.empty(examData)"
            >
                <u-image
                    width="64rpx"
                    height="32rpx"
                    src="@/pageCourse/static/images/contents_icon_test.png"
                ></u-image>
                <view class="content">
                    <view class="title u-line-1">{{ examData.title }}</view>
                    <view class="u-flex u-row-between">
                        <view class="price">{{
                            examData.user_price | formatCurrency
                        }}</view>
                        <view class="count">永久有效</view>
                    </view>
                </view>
            </view>

            <u-cell-group :border="false" style="margin-top: 22rpx">
                <u-cell-item
                    v-if="credit_arr.length != 0"
                    title="积分"
                    :value="text"
                    :border-bottom="false"
                    hover-class="none"
                    :value-style="{ color: isCoupon == 0 ? '' : '#FF8A52' }"
                    @click="openCoupon"
                ></u-cell-item>
            </u-cell-group>
        </edu-mescroll-body>
        <view class="u-flex bottom-navbar">
            <view class="total">
                合计：
                <text class="num">{{ sumPrice | formatCurrency }}</text>
            </view>
            <view class="btn" @click="submit">提交订单</view>
        </view>

        <!-- 积分弹窗 -->
        <u-popup
            v-model="couponPopup"
            mode="bottom"
            border-radius="34"
            height="723"
        >
            <view class="coin">
                <view class="coin-title">积分抵扣</view>
                <scroll-view
                    scroll-y="true"
                    class="scrollY"
                    style="height: 500rpx; width: 100%"
                >
                    <u-radio-group
                        v-model="paywayRadio"
                        size="44"
                        style="width: 100%"
                    >
                        <view
                            class="radio-item"
                            v-for="(item, index) in credit_arr"
                            :key="index"
                        >
                            <view class="radio_li">
                                <view
                                    class="left-ltem addClass"
                                    v-if="index == 0"
                                    >可使用积分 {{ item.credit }}</view
                                >
                                <view class="left-ltem" v-else
                                    >{{ item.credit }}积分</view
                                >
                                <view
                                    class="right-item"
                                    @click="change(item, item.num, index)"
                                >
                                    <view class="can-num"
                                        >可抵￥{{ item.num }}</view
                                    >
                                    <u-radio
                                        :name="index"
                                        :active-color="globPrimaryColor"
                                    ></u-radio>
                                </view>
                            </view>
                        </view>
                    </u-radio-group>
                </scroll-view>
                <view class="sure" @click="sureClick()">确定</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            examData: {},
            upOption: {
                auto: false,
            },
            options: {},
            sumPrice: "",

            isCoupon: 1,
            credit_num: 0,
            couponPopup: false,
            paywayRadio: 0,

            credit_arr: [],
            credit_redeem: 1,
            credit_redeem_percent: 1,
            str_credit: {
                credit: 0,
                num: 0,
            },

            save_item: {},
            save_index: "",
            new_name: 0,
            isSure: 0,
        };
    },
    onLoad(options) {
        this.options = options;
        this.getOrderSection();
    },
    computed: {
        ...mapGetters({
            globPrimary: "designSetting/getGlobTheme",
            globPrimaryColor: "designSetting/getGlobThemeColor",
        }),
        text() {
            if (this.isCoupon == 0) {
                return `可抵扣￥${this.credit_num}`;
            } else {
                return `可抵扣￥${this.credit_num}`;
            }
        },
    },
    methods: {
        openCoupon() {
            this.couponPopup = true;
            this.paywayRadio = this.save_index;
        },
        change(item, name, index) {
            this.save_item = item;
            if (item.isChose) {
                this.paywayRadio = null;
                this.credit_arr.forEach((el) => (el.isChose = false));
                this.isSure = -1;
            } else {
                this.paywayRadio = index;
                this.credit_arr.forEach((el, key) =>
                    index == key ? (el.isChose = true) : (el.isChose = false)
                );
                this.new_name = name;
                this.isSure = 1;
            }
            this.save_item = item;
        },
        sureClick() {
            this.sumPrice = this.examData.user_price;
            if (this.isSure == -1) {
                this.credit_num = 0;
                this.sumPrice = this.sumPrice;
                this.isCoupon = 0;
                var str_credit = { credit: 0, num: 0 };
                this.str_credit = JSON.stringify(str_credit);
                this.couponPopup = false;
                this.save_index = null;
            } else if (this.isSure == 1) {
                this.str_credit = JSON.stringify(this.save_item);
                this.isCoupon = 1;
                this.credit_num = this.new_name;
                this.sumPrice = this.sumPrice - this.new_name;
                this.couponPopup = false;
                this.credit_arr.forEach((el, key) => {
                    if (this.save_item.num == el.num) {
                        this.save_index = key;
                    }
                });
            }
        },
        // 下拉刷新
        refresh() {
            this.mescroll.resetUpScroll();
        },
        // 获取订单信息
        getOrderSection() {
            const _this = this;
            const calc = {
                // 公开考试
                paper: function () {
                    _this.$edu.api
                        .renderPaperOrder({
                            paper_id: _this.options.id,
                            id: _this.options.exam_id,
                        })
                        .then((res) => {
                            _this.credit_arr = res.data.credit_arr;
                            if (_this.credit_arr.length != 0) {
                                _this.credit_num = res.data.credit_arr[0].num;
                                _this.str_credit = JSON.stringify(
                                    res.data.credit_arr[0]
                                );
                            }
                            _this.credit_arr.map((el, key) =>
                                key == 0
                                    ? (el.isChose = true)
                                    : (el.isChose = false)
                            );
                            _this.examData = res.data;
                            _this.sumPrice =
                                res.data.user_price - _this.credit_num;
                            _this.mescroll.endSuccess(1, false);
                        });
                },
                // 专项
                special: function () {
                    _this.$edu.api
                        .renderSpecialOrder({ special_id: _this.options.id })
                        .then((res) => {
                            _this.credit_arr = res.data.credit_arr;
                            if (_this.credit_arr.length != 0) {
                                _this.credit_num = res.data.credit_arr[0].num;
                                _this.str_credit = JSON.stringify(
                                    res.data.credit_arr[0]
                                );
                            }
                            _this.credit_arr.map((el, key) =>
                                key == 0
                                    ? (el.isChose = true)
                                    : (el.isChose = false)
                            );
                            _this.examData = res.data;
                            _this.sumPrice =
                                res.data.user_price - _this.credit_num;
                            _this.mescroll.endSuccess(1, false);
                        });
                },
                // 套卷
                rollup: function () {
                    _this.$edu.api
                        .renderRollOrder({ rollup_id: _this.options.id })
                        .then((res) => {
                            _this.credit_arr = res.data.credit_arr;
                            if (_this.credit_arr.length != 0) {
                                _this.credit_num = res.data.credit_arr[0].num;
                                _this.str_credit = JSON.stringify(
                                    res.data.credit_arr[0]
                                );
                            }
                            _this.credit_arr.map((el, key) =>
                                key == 0
                                    ? (el.isChose = true)
                                    : (el.isChose = false)
                            );
                            _this.examData = res.data;
                            _this.sumPrice =
                                res.data.user_price - _this.credit_num;
                            _this.mescroll.endSuccess(1, false);
                        });
                },
                run: function (fn) {
                    return fn && fn();
                },
            };
            calc.run(calc[_this.options.key]);
        },
        // 提交订单
        submit() {
            const _this = this;
            if (_this.str_credit instanceof Object) {
                _this.str_credit = JSON.stringify(_this.str_credit);
            }
            const calc = {
                // 公开考试
                paper: function () {
                    _this.$edu.api
                        .createPaperOrder({
                            paper_id: _this.examData.id,
                            credit: _this.str_credit,
                            id: _this.options.exam_id,
                        })
                        .then((res) => {
                            if (res.data.need_pay == 0) {
                                _this.$u.route({
                                    type: "back",
                                });
                            } else {
                                calc.route(res.data.order_no, res.data.payment);
                            }
                        });
                },
                // 专项
                special: function () {
                    _this.$edu.api
                        .createSpecialOrder({
                            special_id: _this.examData.id,
                            credit: _this.str_credit,
                        })
                        .then((res) => {
                            if (res.data.need_pay == 0) {
                                _this.$u.route({
                                    type: "back",
                                });
                            } else {
                                calc.route(res.data.order_no, res.data.payment);
                            }
                        });
                },
                // 套卷
                rollup: function () {
                    _this.$edu.api
                        .createRollOrder({
                            rollup_id: _this.examData.id,
                            credit: _this.str_credit,
                        })
                        .then((res) => {
                            if (res.data.need_pay == 0) {
                                _this.$u.route({
                                    type: "back",
                                });
                            } else {
                                calc.route(res.data.order_no, res.data.payment);
                            }
                        });
                },
                // 提交之后的跳转
                route: function (no, payment) {
                    let params = {
                        id: _this.options.moduleId,
                        no: no,
                        payment: payment,
                        redirect_type: _this.options.key,
                    };
                    if (_this.options.key == "rollup") {
                        params = {
                            ...params,
                            title: _this.options.title,
                        };
                    }
                    _this.$u.route({
                        type: "redirectTo",
                        url: "pages/pay",
                        params: params,
                    });
                },
                run: function (fn) {
                    return fn && fn();
                },
            };
            calc.run(calc[_this.options.key]);
        },
    },
};
</script>

<style lang="scss" scoped>
.exam {
    ::v-deep .section-wrapper {
        margin-top: 20rpx;
        padding: 26rpx 30rpx 34rpx;
        background-color: #fff;

        .u-image {
            margin-top: 7rpx;
        }
        .content {
            flex: 1;
            max-width: 600rpx;
            margin-left: 24rpx;
            .title {
                font-size: 28rpx;
                font-weight: 400;
                color: $edu-main-color;
                margin-bottom: 30rpx;
            }
            .count {
                font-size: 22rpx;
                font-weight: 400;
                color: $edu-tips-color;
            }
            .price {
                font-size: 26rpx;
                font-weight: 500;
                color: $edu-price-color;
                margin-right: 10rpx;
            }
        }
    }
}

.bottom-navbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    height: 98rpx;
    padding: 0 30rpx;
    background: #ffffff;
    box-shadow: 0px 2rpx 14rpx 0px rgba(0, 0, 0, 0.06);

    .total {
        margin-left: auto;
        font-size: 26rpx;
        font-weight: 400;
        color: #303133;
        .num {
            font-size: 30rpx;
            font-weight: 500;
            color: #f54030;
        }
    }
    .btn {
        width: 220rpx;
        height: 72rpx;
        @include bg-color();
        border-radius: 39rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 28rpx;
    }
}

.coin {
    padding: 30rpx 30rpx 10rpx 30rpx;
    .coin-title {
        height: 45rpx;
        line-height: 45rpx;
        text-align: center;
        font-size: 32rpx;
        color: #303133;
        font-weight: bold;
        margin-bottom: 44rpx;
    }
    .sure {
        height: 72rpx;
        width: 640rpx;
        @include bg-color();
        font-size: 32rpx;
        line-height: 72rpx;
        text-align: center;
        margin: 0 auto;
        color: #ffffff;
        border-radius: 36rpx;
    }
    .radio-item {
        height: auto;
        width: 100%;
        margin-bottom: 56rpx;
        .radio_li {
            display: flex;
            justify-content: space-between;
            .left-ltem {
                height: 44rpx;
                line-height: 44rpx;
                font-size: 30rpx;
                color: #303133;
            }
            .right-item {
                height: 44rpx;
                line-height: 44rpx;
                display: flex;
                .can-num {
                    font-size: 26rpx;
                    color: #909399;
                    margin-right: 23rpx;
                }
            }
        }
    }
}
.addClass {
    font-weight: bold;
}
</style>
